<style scoped>
    #welcome{width:100%;height:100%;background-size:cover;overflow: auto;background-position:center center;box-shadow: 0 0px 3px rgba(0,0,0,.5);text-align: center;}
    #welcome img{
        width:100%;
        height:100%;
        overflow:auto;
    }
    #alert{
        margin: 10px 5px 0px 5px;
        font-size: 13px;
    }
    #alert-content{
        font-size: 13px;
        color: #1c2438;

    }
    .ivu-card-body .demo-color-name{
        color: #fff;
        font-size: 14px;
    }
    .ivu-card-body .demo-color-desc{
        color: #fff;
        opacity: .7;
    }
    .system-info,.develop-info,.message-info{
        color: #1c2438;
    }
    .develop-info li {
        list-style: none;
        text-align: left;
    }
    .develop-info a{
        color: #1c2438;
        background: 0 0;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        transition: color .2s ease;
    }
    .fontsize .ivu-table-cell span{
        font-size: 14px;
    }
</style>
<template>
    <div id="welcome">
        <!-- 首页提示框 -->
        <Row>
            <Col span="24">
                <Alert show-icon id="alert" closable>
                    <template slot="desc">
                        <p  id="alert-content">欢迎来到新型河道水污检测与管理系统V2.0。系统进行前后端分离设计，前端基于Vue.js，后端则采用Spring Boot + Oauth2设计接口。如有疑问，请在下方提交。
                        </p>
                    </template>
                </Alert>                
            </Col>
        </Row>
        <!-- 报警信息显示 -->
        <Row>
            <!-- 已消除 -->
            <Col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="ivu-card" style="background: rgb(43, 133, 228);margin: 15px 20px 20px 40px;height: 95px;">    
                        <div class="ivu-card-body">
                            <div data-v-542f4644="" class="demo-color-name">已消除报警点</div> 
                            <div data-v-542f4644="" class="demo-color-desc">#0</div>
                        </div>
                    </div>
            </Col>
            <!-- 已确认 -->
            <Col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="ivu-card" style="background: #19be6b;margin: 15px 20px 20px 40px;height: 95px;">    
                        <div class="ivu-card-body">
                            <div data-v-542f4644="" class="demo-color-name">已确认报警点</div> 
                            <div data-v-542f4644="" class="demo-color-desc">#0</div>
                        </div>
                    </div>
            </Col>
            <!-- 未确认 -->
            <Col :xs="24" :sm="12" :md="8" :lg="6">
                    <div class="ivu-card" style="background: #ff9900;margin: 15px 20px 20px 40px;height: 95px;">    
                        <div class="ivu-card-body">
                            <div data-v-542f4644="" class="demo-color-name">未确认报警点</div> 
                            <div data-v-542f4644="" class="demo-color-desc">#0</div>
                        </div>
                    </div>
            </Col>
            <!-- 已发起 -->
            <Col :xs="24" :sm="12" :md="8" :lg="6">
                <div data-v-542f4644="" class="ivu-card" style="background: #ed3f14;margin: 15px 20px 20px 40px;height: 95px;">
                    <div class="ivu-card-body">
                        <div data-v-542f4644="" class="demo-color-name">已发起报警点</div> 
                        <div data-v-542f4644="" class="demo-color-desc">#0</div>
                    </div>
                </div>
            </Col>
        </Row>
        <!-- 首页附属功能 -->
        <Row type="flex" justify="space-between" >
            <!-- 系统架构信息  -->
            <Col :xs="24" :sm="24" :md="8" :lg="8"  class="system-info">
                <Card>
                    <p slot="title">
                        系统架构
                    </p>
                    <Table :columns="columns1" :data="data1" class="fontsize"></Table>
                </Card>
            </Col>
            <!-- 留言提交 -->
            <Col :xs="24" :sm="24" :md="8" :lg="8" class="message-info">
                <Card>
                    <p slot="title">
                        留言反馈
                    </p>
                    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
                        <FormItem label="标题" prop="title">
                            <Input type="text" v-model="formCustom.title"></Input>
                        </FormItem>
                        <FormItem label="留言内容" prop="content">
                            <Input type="text" v-model="formCustom.content"></Input>
                        </FormItem>
                        <FormItem label="联系邮箱" prop="email">
                            <Input type="email" v-model="formCustom.email"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
                            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
            <!-- 开发者信息 -->
            <Col :xs="24" :sm="24" :md="8" :lg="6" class="develop-info">
                <Card>
                    <p slot="title">
                        开发者信息
                    </p>
                    <ul>
                        <li><p><b><Icon type="ios-paperplane"></Icon></b> <a href="https://blog.luckyye.top" target="_blank" style="margin-left: 15px;color: #337ab7;">https://blog.luckyye.top</a></p></li>
                        <br>
                        <li><p><b><Icon type="social-googleplus"></Icon></b> <a href="Mailto:luckyyinni@gmail.com" target="_blank" style="margin-left: 15px;color: #337ab7;">luckyyinni@gmail.com</a></p></li>
                    </ul>
                </Card>
            </Col>
        </Row>
    </div>
</template>


<script>
    export default {
        data () {
            /* 留言验证常量定义 */
            const validateTitle = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入留言标题！'));
                } else {
                    if (this.formCustom.content !== '') {
                        // 模拟对content框验证
                        this.$refs.formCustom.validateField('content');
                    }
                    callback();
                }
            };
            const validateContent = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入留言内容！'));
                } else {
                    callback();
                }
            };
            const validateEmail = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入您的邮箱！'));
                } else {
                    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
                    if (reg.test(value)) {
                        callback();
                    } else {
                        callback(new Error('请检查邮箱格式符合规范！'));
                    }
                }
                // 模拟异步验证效果
                // setTimeout(() => {
                //     if (!Number.isInteger(value)) {
                //         callback(new Error('Please enter a numeric value'));
                //     } else {
                //         if (value < 18) {
                //             callback(new Error('Must be over 18 years of age'));
                //         } else {
                //             callback();
                //         }
                //     }
                // }, 1000);
            };
            
            return {
                /*登录用户名*/
                author: null,
                columns1: [
                    {
                        title: '技术栈',
                        key: 'stack'
                    },
                    {
                        title: '版本',
                        key: 'version'
                    },
                ],
                data1: [
                    {
                        stack: 'Vue.js 、 Iview UI',
                        version: '2.5.2 、 2.11.0',
                    },
                    {
                        stack: 'vuex 、 vue-router 、 axios',
                        version: '3.0.1 、 3.0.1 、 0.18.0',
                    },
                    {
                        stack: 'Spring boot 、 Mybatis',
                        version: '2.0.0.M7 、 1.3.1',
                    },
                    {
                        stack: 'Spring Security 、 Spring Security Oauth2',
                        version: '',
                    },
                ],
                /* 留言表单实体 */
                formCustom: {
                    title: '',
                    content: '',
                    email: ''
                },
                /* message设置 */
                message: {
                    title: null,
                    content: null,
                    email: null,
                    author: null
                },
                /* 留言表单规则验证 */
                ruleCustom: {
                    title: [
                        { validator: validateTitle, trigger: 'blur' }
                    ],
                    content: [
                        { validator: validateContent, trigger: 'blur' }
                    ],
                    email: [
                        { validator: validateEmail, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted(){
            /*页面初始化调用方法*/
            this.axios({
                method: 'get',
                url: '/user/'+window.localStorage.getItem("currentUser_name")
            }).then(function(response){
                this.author = response.data.name;
                console.log(this.author);
            }.bind(this)).catch(function(author){
                alert(error);
            });
        },
        methods: {
            /* 初始化留言实体 */
            initFormCustom () {
                this.formCustom.title = '',
                this.formCustom.content = '',
                this.formCustom.email = ''
            },
            /* 初始化message */ 
            initMessage () {
                this.message.title = null,
                this.message.content = null,
                this.message.email = null,
                this.message.author = null
            },
            /* formCustom设置 */
            formCustomSet (e) {
                this.formCustom.title = e.title,
                this.formCustom.content = e.content,
                this.formCustom.email = e.email
            },
            /* message设置*/
            messageSet (e) {
                this.message.title = e.title,
                this.message.content = e.content,
                this.message.email = e.email,
                this.message.author = this.author
            },
            /* 留言提交事件处理 */
            handleSubmit (formCustom) {
                this.$refs[formCustom].validate((valid) => {
                    if (valid) {
                        this.initMessage();
                        this.messageSet(this.formCustom);
                        console.log(this.message);
                        this.axios({
                            method: 'post',
                            url: '/welcome/message',
                            data: this.message
                        }).then(function (response) {
                            this.initFormCustom();
                            this.$Message.success('提交留言成功，会尽快回复邮件!');
                        }.bind(this)).catch (
                            function (error) {
                                alert(error);
                            });
                    } else {
                        this.$Message.error('提交留言失败!');
                    }
                })
            },
            /* 重置 */
            handleReset (formCustom) {
                this.$refs[formCustom].resetFields();
            }
        }
    }
</script>